<template>
  <div class="project-list-container">
    <!-- 顶部统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="stat-card">
              <i class="el-icon-s-data"></i>
              <div class="stat-info">
                <div class="stat-title">总项目数</div>
                <div class="stat-value">{{ totalProjects }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="stat-card">
              <i class="el-icon-time"></i>
              <div class="stat-info">
                <div class="stat-title">在途项目</div>
                <div class="stat-value">{{ ongoingProjects }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="stat-card">
              <i class="el-icon-success"></i>
              <div class="stat-info">
                <div class="stat-title">已完成项目</div>
                <div class="stat-value">{{ completedProjects }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="stat-card">
              <i class="el-icon-warning"></i>
              <div class="stat-info">
                <div class="stat-title">待审核项目</div>
                <div class="stat-value">{{ pendingProjects }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
          <!-- 新增操作按钮卡片 -->
          <el-col :span="3" style="margin-left: 30px;">
           <el-card shadow="hover">
            <div class="operation-card">
              <router-link tag="button" class="button-29" to="/ManagerHead/AddProject">
                新建项目&nbsp;&nbsp;<i class="el-icon-plus" style="font-weight: bold"></i>
              </router-link>
              <el-button type="primary"  @click="downLoadExcel">
                导出 Excel<i class="el-icon-download el-icon--right"></i>
              </el-button>
            </div>
           </el-card>
        </el-col>
      </el-row>
    </div>


    <!-- 导航标签 -->
    <div class="navigation-tabs">
      <router-link tag="button" class="select-nav" active-class="active" to="/ManagerHead/ProjectList/ProjectDoing">在途项目</router-link>
      <router-link tag="button" class="select-nav" active-class="active" to="/ManagerHead/ProjectList/ProjectDone">结项项目</router-link>
    </div>

    <!-- 路由视图 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import http from "@/api/http";

export default {
  name: "ProjectList",
  data() {
    return {
      tableData: [],
      totalProjects: 0,
      ongoingProjects: 0,
      completedProjects: 0,
      pendingProjects: 0
    }
  },
  computed: {
    getProjectStats() {
      return {
        total: this.tableData.length,
        ongoing: this.tableData.filter(p => p.projectStatus === '在途').length,
        completed: this.tableData.filter(p => ['已结项', '已过审', '未过审'].includes(p.projectStatus)).length,
        pending: this.tableData.filter(p => p.projectStatus === '已过审').length
      };
    }
  },
  methods: {
    async downLoadExcel() {
      try {
        const response = await http.get("/api/export/user/excel", {
          responseType: "blob"
        });

        const blob = new Blob([response], { type: "application/octet-stream" });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = downloadUrl;
        link.download = "project.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        this.$message.success("Excel 下载成功");
      } catch (error) {
        console.error("下载 Excel 文件失败", error);
        this.$message.error("Excel 下载失败");
      }
    },
    async fetchOngoingProjects() {
      try {
        const response = await http.get('/api/projects/ongoing');
        return response || [];
      } catch (error) {
        console.error("获取在途项目数据失败", error);
        return [];
      }
    },
    async fetchCompletedProjects() {
      try {
        const response = await http.get('/api/projects/completed');
        return response || [];
      } catch (error) {
        console.error("获取已完成项目数据失败", error);
        return [];
      }
    },
    async updateAllStats() {
      try {
        const ongoingData = await this.fetchOngoingProjects();
        const completedData = await this.fetchCompletedProjects();

        this.ongoingProjects = ongoingData.length;
        this.completedProjects = completedData.filter(p => ['已结项', '已过审', '未过审'].includes(p.projectStatus)).length;
        this.pendingProjects = completedData.filter(p => p.projectStatus === '已结项').length;
        this.totalProjects = ongoingData.length + completedData.length;

      } catch (error) {
        console.error("更新统计数据失败", error);
        this.$message.error("获取统计数据失败");
      }
    }
  },
  created() {
    this.updateAllStats();
  },
  watch: {
    '$route'() {
      this.updateAllStats();
    }
  }
}
</script>

<style scoped>
/* 修改和新增的样式 */


.operation-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0;
}

.operation-card .button-29,
.operation-card .el-button {
  width: 90%;
  margin: 0;
  height: 40px;
}

/* 确保所有卡片高度一致 */
.el-card {
  height: 120px;
}
.project-list-container {
  padding: 20px;
}

.statistics-cards {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-card i {
  font-size: 48px;
  margin-right: 20px;
  color: #409EFF;
}

.stat-info {
  flex-grow: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.operation-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.navigation-tabs {
  margin-bottom: 0px;
}

.select-nav {
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  background: transparent;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
  position: relative;
}

.select-nav.active {
  color: #409EFF;
  font-weight: bold;
}

.select-nav.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #409EFF;
}

.main-content {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

/* 保留原有的 button-29 样式 */
.button-29 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  font-weight: bold;
  margin: 10px;
}

.button-29:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}
</style>











<!-- <script>
import axios from "axios";
import http from "@/api/http";
export default {
  name: "ProjectList",
  methods: {
    async downLoadExcel() {
      try {
        const response = await http.get("/api/export/user/excel", {
          responseType: "blob"
        });

        const blob = new Blob([response], { type: "application/octet-stream" });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = downloadUrl;
        link.download = "project.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        this.$message.success("Excel 下载成功");
      } catch (error) {
        console.error("下载 Excel 文件失败", error);
        this.$message.error("Excel 下载失败");
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div>
      <router-link tag="button" class="button-29" to="/ManagerHead/AddProject">新建项目&nbsp;&nbsp;<i class="el-icon-plus" style="font-weight: bold"></i></router-link>
      </div>
      <div></div>
      <div>
      <el-button style="margin-right: 50px" @click="downLoadExcel">下载 Excel<i class="el-icon-download el-icon--right"></i></el-button>
      </div>
    </div>
    <div>
      <router-link tag="button" class="select-nav" active-class="active" to="/ManagerHead/ProjectList/ProjectDoing">在途项目</router-link>
      <router-link tag="button" class="select-nav" active-class="active" to="/ManagerHead/ProjectList/ProjectDone">结项项目</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<style>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}


.button-29 {
 align-items: center;
 appearance: none;
 background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
 border: 0;
 border-radius: 6px;
 box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-flex;
 height: 48px;
 justify-content: center;
 line-height: 1;
 list-style: none;
 overflow: hidden;
 padding-left: 16px;
 padding-right: 16px;
 position: relative;
 text-align: left;
 text-decoration: none;
 transition: box-shadow .15s,transform .15s;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 white-space: nowrap;
 will-change: box-shadow,transform;
 font-size: 18px;
 font-weight: bold;
 margin: 10px;
}

.button-29:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}

</style> -->
